﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="left" style="width: 50%;height:100%; float:left;"></div>
<div id="right" style="width: 50%;height:100%; float:right;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var left = echarts.init($("#left")[0]);
        var right = echarts.init($("#right")[0]);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '仓库租赁面积（万㎡）对照',
                subtext: '按仓库类型',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['常温仓', '暖库', '冷库', '恒温仓']
            },
            series: [
                {
                    name: '仓库类型',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 335, name: '常温仓' },
                        { value: 310, name: '暖库' },
                        { value: 234, name: '冷库' },
                        { value: 135, name: '恒温仓' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option_right = {
            title: {
                text: '仓库租赁面积（万㎡）对照',
                subtext: '按仓库星级',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['一星', '二星', '三星', '四星', '五星']
            },
            series: [
                {
                    name: '仓库星级',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: 168, name: '一星' },
                        { value: 280, name: '二星' },
                        { value: 654, name: '三星' },
                        { value: 347, name: '四星' },
                        { value: 135, name: '五星' }
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        left.setOption(option);
        right.setOption(option_right);
    })
</script>